<template>
  <view class="container">
    <view class="header">
      <image :src="avatar" class="avatar" mode="aspectFill" @click="chooseAndShowImage"></image>
    </view>
    <view class="btn-group">
      <button @click="chooseAndShowImage">选择图片显示</button>
      <button @click="previewImages">预览图片</button>
      <button @click="getImageInfo">获取图片信息</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      avatar: "/static/logo.png", // 初始图片路径，需与实际静态资源路径一致
      chosenImages: [] // 存储选择的图片路径，用于预览和获取信息
    };
  },
  methods: {
    // 选择图片并显示
    chooseAndShowImage() {
      uni.chooseImage({
        count: 6,
        sourceType: ['album'],
        success: (res) => {
          this.avatar = res.tempFilePaths[0];
          this.chosenImages = res.tempFilePaths;
        }
      });
    },
    // 预览图片
    previewImages() {
      if (this.chosenImages.length === 0) {
        uni.showToast({
          title: '请先选择图片',
          icon: 'none'
        });
        return;
      }
      uni.previewImage({
        urls: this.chosenImages
      });
    },
    // 获取图片信息
    getImageInfo() {
      if (this.chosenImages.length === 0) {
        uni.showToast({
          title: '请先选择图片',
          icon: 'none'
        });
        return;
      }
      uni.getImageInfo({
        src: this.chosenImages[0],
        success: (image) => {
          uni.showModal({
            title: '图片信息',
            content: `宽度：${image.width}px\n高度：${image.height}px`,
            showCancel: false
          });
        }
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
}
.header {
  display: flex;
  justify-content: center;
  margin: 40rpx 0;
}
.avatar {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
}
.btn-group {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
button {
  width: 100%;
}
</style>